<template>
  <div class="m-25 mt-65">
    <div class="normal-box-mod">
      <div class="normal-box-hd clearfix">
        <div class="normal-box-title">
          <div class="decorate-square"></div>
          <h2>回收信息</h2>
        </div>
      </div>
      <div class="normal-box-bd">
        <Card style="margin-bottom: 10px">
          <div>
            <div class="clearfix">
              <Row style="margin-bottom:20px">
                <Input placeholder="订单号"
                       class="mr-10"
                       v-model="queryData.orderNo"
                       style="width: 150px"
                       :clearable="true" />
                <Input placeholder="用户卡号"
                       class="mr-10"
                       v-model="queryData.cardNo"
                       style="width: 250px"
                       :clearable="true" />
                <Input placeholder="公司名称"
                       class="mr-10"
                       v-model="queryData.companyName"
                       style="width: 150px"
                       :clearable="true" />
                <Input placeholder="回收员"
                       class="mr-10"
                       v-model="queryData.insertName"
                       style="width: 250px"
                       :clearable="true" />
              </Row>
              <Col span="5"
                   class="mr-10">
              <sele @ProvinceData="childByValue"></sele>
              </Col>
              <DatePicker v-model="queryData.startTime"
                          :clearable=true
                          :editable=false
                          format="yyyy/MM/dd"
                          type="date"
                          placement="bottom-end"
                          placeholder="开始时间"
                          style="width: 200px"></DatePicker>
              &nbsp;-&nbsp;
              <DatePicker v-model="queryData.endTime"
                          :clearable=true
                          :editable=false
                          format="yyyy/MM/dd"
                          type="date"
                          placement="bottom-end"
                          placeholder="结束时间"
                          style="width: 200px"></DatePicker>
              <Button type="primary"
                      custom-icon="iconfont icon-chaxun"
                      size="small"
                      style="margin-left:20px"
                      @click="inQuire">查询</Button>
            </div>
          </div>
        </Card>
        <div class="normal-list-page-mod">
          <div class="mb-2">
            <!-- <Button-group>
              <Button
                custom-icon="iconfont icon-shanchusekuai"
                size="small"
                type="error"
                @click="batchDel"
              >
                删除
              </Button>
              <Button
                custom-icon="iconfont icon-fangkuai2"
                size="small"
                type="primary"
                @click="showCreateModal"
              >
                新建
              </Button>
            </Button-group> -->
          </div>
          <div class="normal-list-page-bd">
            <Table border
                   :loading="list.loading"
                   :columns="list.columns"
                   :data="list.tableData"
                   @on-selection-change="selectionChange">
              <template slot-scope="{ row }"
                        slot="isEvaluation">
                <Button v-if="row.isEvaluation==1"
                        type="primary"
                        plain
                        size="small"
                        @click="getRateInfo(row.orderNo)">已评价</Button>
                <Button v-if="row.isEvaluation==0"
                        type="primary"
                        disabled
                        plain
                        size="small">未评价</Button>
                <span v-else></span>
              </template>
            </Table>
          </div>
          <div class="normal-list-page-ft clearfix">
            <Page class="fr"
                  :total="queryData.totalRecord"
                  :page-size="queryData.pageSize"
                  :current="queryData.page"
                  @on-change="changePage"
                  @on-page-size-change="onPageSizeChange"
                  show-elevator
                  show-total
                  show-sizer></Page>
          </div>
          <Modal v-model="modal.img.isShow"
                 width="1000px">
            <img :src="modal.img.url"
                 style="width: 50%; height: 50%; display: block; margin: 0 auto" />
            <div slot="footer" />
          </Modal>
          <Modal v-model="showRate"
                 title="评价内容">
            <Rate disabled
                  v-model="rateInfo.evaluationLevel" />
            <p class="rateContent">{{rateInfo.evaluationLabel}}</p>
            <p class="rateTime">{{rateInfo.evaluationTime}}</p>
          </Modal>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import RecycleApi from '@/api/zhcg/recycle.js'
import { Message } from 'iview'
import global from '@/assets/js/global'
import sele from '@/view/test/city.vue'
export default {
  name: 'user',
  components: { sele },
  data () {
    return {
      modal: {
        positionList: [
          { id: 'GET', name: 'GET' },
          { id: 'POST', name: 'POST' }
        ],
        img: {
          isShow: false,
          url: ''
        }
      },
      // 列表
      list: {
        loading: false,
        selections: [],
        // 列表展示数据
        tableData: [],
        // 表格表头
        columns: [
          // {
          //   type: 'selection',
          //   width: 60,
          //   align: 'center'
          // },
          /** 开始自动生成 */
          {
            title: '订单号',
            key: 'orderNo',
            align: 'center',
            width: 80
          },
          {
            title: '回收员',
            key: 'insertName',
            align: 'center',
            width: 80
          },
          {
            title: '回收公司',
            key: 'companyName',
            align: 'center',
            width: 100
          },
          {
            title: '用户卡号',
            key: 'cardNo',
            align: 'center',
            width: 120
          },
          {
            title: '用户名',
            key: 'userName',
            align: 'center',
            width: 80
          },
          {
            title: '回收类别',
            key: 'recleName',
            align: 'center',
            width: 100
          },
          {
            title: '回收重量',
            key: 'num',
            align: 'center',
            width: 100
          },
          {
            title: '单位',
            key: 'units',
            align: 'center',
            width: 80
          },
          {
            title: '积分',
            key: 'score',
            align: 'center',
            width: 80
          },
          {
            title: '回收照片',
            key: 'snapshoot',
            align: 'center',
            width: 150,
            render: (h, params) => {
              return h('img', {
                attrs: {
                  src: params.row.snapshoot
                },
                style: {
                  width: '100px'
                  //   height: "35px",
                },
                on: {
                  click: () => {
                    this.showBigPic(params.row.snapshoot) // 此处再用一个方法，建一个modal把图放大。
                  }
                }
              })
            }
          },

          {
            title: '回收时间',
            key: 'insertTime',
            align: 'center',
            minWidth: 150
          },
          {
            title: '备注',
            key: 'remark',
            align: 'center',
            minWidth: 180
          },
          {
            title: '评价信息',
            key: 'isEvaluation',
            align: 'center',
            width: '120px',
            slot: 'isEvaluation'
          }

          /** 自动生成结束 */
          //   {
          //     title: '操作',
          //     align: 'center',
          //     minWidth: 250,
          //     fixed: 'right',
          //     slot: 'action'
          //   }
        ]
      },
      // 页面查询数据
      queryData: {
        limit: 10,
        page: 1,
        totalRecord: 0
      },
      typeList: [
        {
          label: '可回收',
          value: 12
        },
        {
          label: '易腐垃圾 ',
          value: 11
        },
        {
          label: '其他垃圾 ',
          value: 13
        },
        {
          label: '有毒有害 ',
          value: 14
        }
      ],
      rateInfo: {},
      showRate: false
    }
  },
  mounted () {
    let area = window.defArea
    this.queryData.provid = area[0]
    this.queryData.cityid = area[1]
    this.queryData.distid = area[2]
    this.getTableData()
  },
  methods: {
    // 获取列表
    getTableData () {
      const that = this
      this.queryData.startTime = global.time(this.queryData.startTime)
      this.queryData.endTime = global.time(this.queryData.endTime)
      that.queryData.totalRecord = undefined
      RecycleApi.getPageList(that.queryData)
        .then((res) => {
          that.list.tableData = res.data.list
          that.queryData.totalRecord = res.data.totalRecord
          that.queryData.limit = res.data.pageSize
        })
        .catch((error) => {
          Message.error(error)
        })
    },
    // 获取评价
    getRateInfo (val) {
      RecycleApi.getRate({
        orderNo: val
      })
        .then((res) => {
          console.log('rate', res.data)
          this.rateInfo = res.data
          this.showRate = true
        })
        .catch((error) => {
          Message.error(error)
        })
    },
    // 查询
    inQuire () {
      const that = this
      that.queryData.page = 1
      that.getTableData()
    },
    // 每页显示记录数变更
    onPageSizeChange (pageSize) {
      this.queryData.limit = pageSize
      this.getTableData()
    },
    // 换页
    changePage (page) {
      this.queryData.page = page
      this.getTableData()
    },
    showBigPic (item) {
      this.modal.img.isShow = true
      this.modal.img.url = item
    },
    // 六级联动数据获取
    childByValue (data) {
      let area = this.queryData
      area.provid = data.provid || ''
      area.cityid = data.cityid || ''
      area.distid = data.distid || ''
      area.strtid = data.strtid || ''
      area.commid = data.commid || ''
      area.comminid = data.comminid || ''
    }
  }
}
</script>
<style>
    .rateContent{
        line-height: 30px;
        font-size: 20px;
        margin: 50px 0;
    }
    .rateTime{
        text-align: right;
        color: rgb(113, 126, 136);
    }
</style>
